import { useState, useEffect } from 'react';
import { useNavigate } from 'react-router-dom';
import { ArrowLeft, MoreHorizontal, Minus, Target } from 'lucide-react';

// 问诊记录接口
interface ConsultationRecord {
  id: string;
  doctorId: string;
  doctorName: string;
  doctorAvatar: string;
  department: string;
  hospital: string;
  consultationType: '图文咨询' | '电话咨询' | '视频咨询';
  consultationTime: string;
  status: '咨询中' | '已完成' | '已关闭';
  lastMessage?: string;
  unreadCount: number;
  comment?: string; // 用户评论
}

/**
 * 在线咨询页面组件 - 我的问诊记录
 * 
 * 功能特性：
 * - 问诊记录列表展示
 * - 从localStorage读取问诊数据
 * - 继续咨询功能
 * - 简化的标签页导航
 * - 医生信息展示
 * 
 * 主要状态：
 * - activeTab: 当前激活的标签页
 * - consultationRecords: 问诊记录列表
 * 
 * 数据来源：
 * - localStorage中的'consultationRecords'键
 * - 通过consultationUtils.ts管理
 * 
 * 问诊记录结构：
 * - id: 记录唯一标识
 * - doctorId: 医生ID
 * - doctorName: 医生姓名
 * - doctorAvatar: 医生头像
 * - department: 科室
 * - hospital: 医院
 * - consultationType: 咨询类型
 * - consultationTime: 咨询时间
 * - status: 咨询状态
 * - lastMessage: 最后消息
 * - unreadCount: 未读消息数
 * - comment: 用户评论
 * 
 * @returns {JSX.Element} 在线咨询页面组件
 */
export default function OnlineConsultationPage() {
  const navigate = useNavigate();
  const [activeTab, setActiveTab] = useState('全部');
  const [consultationRecords, setConsultationRecords] = useState<ConsultationRecord[]>([]);

  const tabs = ['全部'];

  // 从localStorage获取问诊记录
  useEffect(() => {
    const records = localStorage.getItem('consultationRecords');
    if (records) {
      setConsultationRecords(JSON.parse(records));
    }
  }, []);

  // 过滤记录 - 显示所有记录
  const filteredRecords = consultationRecords;

  const handleBack = () => {
    navigate(-1);
  };

  // 继续咨询
  const continueConsultation = (record: ConsultationRecord) => {
    navigate(`/consultation/${record.doctorId}`, {
      state: { doctor: record }
    });
  };

  // 状态相关函数已删除

  return (
    <div className="min-h-screen bg-gray-50">
      {/* 顶部导航栏 */}
      <div className="bg-white px-4 py-4 flex items-center justify-between shadow-sm">
        <button onClick={handleBack} className="p-2">
          <ArrowLeft size={20} className="text-gray-600" />
        </button>
        <h1 className="text-lg font-semibold text-gray-900">我的问诊记录</h1>
        <div className="flex items-center space-x-2">
          <button className="p-2">
            <MoreHorizontal size={18} className="text-gray-600" />
          </button>
          <button className="p-2">
            <Minus size={18} className="text-gray-600" />
          </button>
          <button className="p-2">
            <Target size={18} className="text-gray-600" />
          </button>
        </div>
      </div>

      {/* 标签页导航 */}
      <div className="bg-white border-b">
        <div className="flex px-4">
          {tabs.map((tab) => (
            <button
              key={tab}
              onClick={() => setActiveTab(tab)}
              className={`flex-1 py-3 px-4 text-sm font-medium transition-colors ${
                activeTab === tab
                  ? 'text-blue-600 border-b-2 border-blue-600'
                  : 'text-gray-500 hover:text-gray-700'
              }`}
            >
              {tab}
            </button>
          ))}
        </div>
      </div>

      {/* 主要内容区域 */}
      {filteredRecords.length > 0 ? (
        <div className="p-4 space-y-3">
          {filteredRecords.map((record) => (
            <div key={record.id} className="bg-white rounded-lg p-4 shadow-sm">
              {/* 医生信息 */}
              <div className="flex items-start space-x-3 mb-3">
                <img 
                  src={record.doctorAvatar} 
                  alt={record.doctorName}
                  className="w-12 h-12 rounded-full"
                />
                <div className="flex-1">
                  <div className="flex items-center justify-between">
                    <h3 className="font-medium text-gray-900">{record.doctorName}</h3>
                  </div>
                  <p className="text-sm text-gray-500">{record.department} · {record.hospital}</p>
                  <p className="text-sm text-gray-500">{record.consultationType} · {record.consultationTime}</p>
                </div>
              </div>

              {/* 最后消息 */}
              {record.lastMessage && (
                <div className="mb-3">
                  <p className="text-sm text-gray-600">{record.lastMessage}</p>
                </div>
              )}

              {/* 用户评论 */}
              {record.comment && (
                <div className="mb-3 p-3 bg-gray-50 rounded-lg">
                  <p className="text-sm text-gray-700">
                    <span className="font-medium">我的评论：</span>
                    {record.comment}
                  </p>
                </div>
              )}

              {/* 操作按钮 */}
              <div className="flex items-center justify-between">
                <div className="flex items-center space-x-4">
                  {record.unreadCount > 0 && (
                    <span className="text-xs text-red-500 bg-red-100 px-2 py-1 rounded-full">
                      {record.unreadCount}条未读
                    </span>
                  )}
                </div>
                <button
                  onClick={() => continueConsultation(record)}
                  className="px-4 py-2 bg-blue-500 text-white text-sm rounded-lg hover:bg-blue-600 transition-colors"
                >
                  继续咨询
                </button>
              </div>
            </div>
          ))}
        </div>
      ) : (
        <div className="flex-1 flex items-center justify-center py-20">
          <div className="text-center">
            {/* 空状态图标 */}
            <div className="mb-4 flex justify-center">
              <div className="relative">
                {/* 文档图标 */}
                <div className="w-16 h-20 bg-gray-200 rounded-lg flex items-center justify-center">
                  <div className="space-y-1">
                    <div className="w-8 h-0.5 bg-gray-400"></div>
                    <div className="w-6 h-0.5 bg-gray-400"></div>
                    <div className="w-7 h-0.5 bg-gray-400"></div>
                  </div>
                </div>
                {/* 装饰元素 */}
                <div className="absolute -left-2 top-2 w-3 h-6 bg-gray-200 rounded-full"></div>
                <div className="absolute -right-2 top-2 w-3 h-6 bg-gray-200 rounded-full"></div>
              </div>
            </div>
            {/* 空状态文字 */}
            <p className="text-gray-500 text-sm">暂无数据</p>
          </div>
        </div>
      )}
    </div>
  );
}